---
import { getIsRtlFromUrl, getLanguageFromURL } from "../../languages";
import GithubIcon from "./githubIcon.astro";
import LanguageSelect from "./LanguageSelect";
import Search from "./Search";
import SidebarToggle from "./sidebarToggle.astro";
import ThemeToggleButton from "./themeToggleButton.astro";

export interface Props {
  isNotFound?: boolean;
}

const { pathname } = Astro.url;
const isRtl = getIsRtlFromUrl(pathname);
const isLtr = !isRtl;
const isLanding = pathname === "/" || !!Astro.props.isNotFound;
const hasTrailing = pathname.endsWith("/");
const currentPage = pathname.slice(0, hasTrailing ? -1 : pathname.length);
const langCode = getLanguageFromURL(pathname);

const navbarLinks: Array<{ href: string; label: string }> = [
  {
    href: `/${langCode}/introduction`,
    label: "Docs",
  },
  {
    href: `/${langCode}/faq`,
    label: "FAQ",
  },
];
---

<nav
  class:list={[
    "navbar relative flex flex-col items-center justify-between py-4",
    {
      "z-40 text-slate-50": isLanding,
      "transition-colors duration-300": !isLanding,
    },
  ]}
  aria-label="Global"
>
  <div class="flex w-full max-w-7xl items-center justify-between px-4">
    <div class="flex w-full items-center justify-between md:w-auto">
      <div>
        <a href="/" class="flex" title="Home" data-home-link>
          <img
            class="block dark:hidden"
            width="50"
            height="50"
            src="/images/t3-dark.svg"
            alt="T3 Logo Dark"
          />
          <img
            class="hidden dark:block"
            width="50"
            height="50"
            src="/images/t3-light.svg"
            alt="T3 Logo Light"
          />
        </a>
      </div>
      <div
        class:list={[
          "hidden gap-2 -space-x-1 md:flex",
          isLtr && "md:ml-10",
          isRtl && "md:mr-10",
        ]}
      >
        {
          navbarLinks.map((navbarLink) => (
            <a
              class:list={[
                "relative inline-flex items-center rounded-md border border-transparent px-3 py-2 transition-colors hover:no-underline",
                {
                  "border bg-t3-purple-200/50 text-t3-purple-800 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50":
                    navbarLink.href === currentPage,
                  "rounded-lg text-t3-purple-100 hover:bg-t3-purple-200/10 hover:text-t3-purple-300":
                    isLanding,
                  "rounded-lg text-t3-purple-800 hover:bg-t3-purple-200/50 hover:text-t3-purple-800 dark:text-t3-purple-100 dark:hover:bg-t3-purple-200/10 dark:hover:text-t3-purple-300":
                    !isLanding,
                },
              ]}
              aria-current={navbarLink.href === currentPage ? "page" : "false"}
              href={navbarLink.href}
            >
              {navbarLink.label}
            </a>
          ))
        }
      </div>
    </div>
    <div class="flex flex-grow items-center justify-end gap-4">
      <GithubIcon />
      {!isLanding && <LanguageSelect language={langCode} client:load />}
      <div
        class:list={[
          "text-center",
          {
            hidden: isLanding,
          },
        ]}
      >
        <ThemeToggleButton />
      </div>
      <div class="block md:hidden">
        <SidebarToggle isLanding={isLanding} />
      </div>
      <div class="hidden w-full max-w-xs rounded-lg md:block">
        <Search isLanding={isLanding} client:load />
      </div>
    </div>
  </div>
</nav>
<script>
  const logo = document.querySelector("[data-home-link]") as HTMLAnchorElement;

  logo.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    window.location.pathname = "/branding";
  });
</script>
